<template>
  <el-container class="goods-edit">
     
    <el-main class="sa-p-t-10">
      <div class="sa-flex">
        <div class="sa-width-130 left-t">审核状态：</div>
        <div :style="{color:colorList[state.info.audit_status?.value]}">{{ state.info.audit_status?.text }}</div>
      </div>
      <el-row :gutter="24" class="version-copy">
        <el-col :span="5">
          <div class="title">自媒体信息</div>

          <div class="sa-flex line">
            <div class="sa-width-80 left-t">平台：</div>
            <div>{{ state.info.platform?.text }}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">达人类型：</div>
            <div>{{ state.info.daren_type?.text }}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">抖音昵称：</div>
            <div>{{ state.info.platform_nickname }}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">抖音UID：</div>
            <div>{{ state.info.platform_account}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">带货等级：</div>
            <div>{{ state.info.commerce_level}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">团购等级：</div>
            <div>{{ state.info.group_level}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">带货分：</div>
            <div>{{ state.info.commerce_number}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">粉丝量：</div>
            <div>{{ state.info.fans}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">粉丝特征：</div>
            <div>-</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">精选作品：</div>
            <div>{{ state.info.selected_works}}</div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="title">达人信息</div>

          <div class="sa-flex line">
            <div class="sa-width-110 left-t">联系电话：</div>
            <div>{{ state.info.user?.mobile}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-110 left-t">性别：</div>
            <div>{{ state.info.sex?.text}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-110 left-t">达人位置：</div>
            <div>{{ state.info.province_name}}{{ state.info.city_name}}{{ state.info.area_name}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-110 left-t">身份证正面图片：</div>
            <sa-image :url="state.info.id_card_image_pros" size="100"></sa-image>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-110 left-t">身份证反面图片：</div>
            <sa-image :url="state.info.id_card_image_cons" size="100"></sa-image>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-110 left-t">接单范围：</div>
            <div>{{ state.info.order_range}}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="title">其它信息</div>

          <div class="sa-flex line">
            <div class="sa-width-110 left-t">我的页面截图：</div>
            <sa-image :url="state.info.my_page" size="100"></sa-image>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-110 left-t">手机号绑定截图：</div>
            <sa-image :url="state.info.phone_binding" size="100"></sa-image>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="title">审核信息</div>

          <div class="sa-flex line">
            <div class="sa-width-80 left-t">提交时间：</div>
            <div>{{ state.info.create_time}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">审核时间：</div>
            <div>{{ state.info.pass_time}}</div>
          </div>
          <div class="sa-flex line">
            <div class="sa-width-80 left-t">拒绝原因：</div>
            <div>{{ state.info.remark}}</div>
          </div>
        </el-col>
      </el-row>

      

      

      

      
    </el-main>
   
  </el-container>
</template>
<script setup>
import { onMounted,ref, reactive,  getCurrentInstance } from 'vue';
import { api } from '../exmaine.service';
const colorList=['#8069f6','#db2424','#32cb4f']

import {  isEmpty, cloneDeep } from 'lodash';
const loading = ref(false);



const { proxy } = getCurrentInstance();

const emit = defineEmits(['modalCallBack']);
const props = defineProps({
  modal: {
    type: Object,
  },
});
const state = reactive({
  info:{}
});

// 获取详情
async function getDetail(id) {
  console.log('id',id)
  loading.value = true;
  const { error, data } = await api.daren.detail({id});
  console.log('data',data)

  if (error === 0) {
    state.info=data
    loading.value = false
    
  }
}


async function init() {
  await getDetail(props.modal.params.id);
}
onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped>
div{
  font-size:13px;
}
.left-t{
  color: #777777;
  text-align: right;
}
.title{
  font-size:18px;
  margin:15px 0 15px 20px;
}
.line{
  line-height: 2em;
  align-items: start;
}
</style>

